<template>
    <div class="common-layout">
        <el-container class="container1">
            <el-aside>
                <dv-border-box8 :dur="0">
                    <node_table class="table"></node_table>
                </dv-border-box8>
                <dv-border-box10>
                    <left_down class="left_down"></left_down>
                </dv-border-box10>
            </el-aside>
            <el-container class="container2">
                <el-main>
                    <!-- <div class="middle_top"> -->
                    <div class="title">
                        <Decoration11> 原型系统</Decoration11>
                        <div class="title2">
                            <el-button class="addNewNode" :onclick="addNode" :disabled="disabled" v-if="false">
                                新增节点</el-button>
                            <Decoration5 :dur="8"></Decoration5>
                            <el-button class="addNewLink" @click="dialogFormVisible = true" v-if="false">新增链路</el-button>
                        </div>
                    </div>
                    <DvBorderBox3>
                        <echarts_topo></echarts_topo>
                    </DvBorderBox3>
                    <!-- </div> -->
                </el-main>
                <el-footer>
                    <DvBorderBox11 title="流量分类">
                        <echarts_chart></echarts_chart>
                    </DvBorderBox11>
                </el-footer>
            </el-container>
            <!-- <el-aside>
                <dv-border-box10 class="right_down">
                    <right_down></right_down>
                </dv-border-box10> 
            </el-aside> -->
        </el-container>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="链路信息" width="300">
        <el-form :model="form">
            <el-form-item label="source" :label-width="formLabelWidth">
                <el-input v-model="form.source" autocomplete="off" />
            </el-form-item>
            <el-form-item label="target" :label-width="formLabelWidth">
                <el-input v-model="form.target" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addLink">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { BorderBox3 as DvBorderBox3 } from '@kjgl77/datav-vue3'
import { Decoration5, Decoration11 } from '@kjgl77/datav-vue3'
import { BorderBox11 as DvBorderBox11 } from '@kjgl77/datav-vue3'
import echarts_topo from './echarts_topology.vue';
import echarts_chart from './echarts_classification.vue';
import node_table from './node_table.vue';
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'
import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'
import { BorderBox9 as DvBorderBox9 } from '@kjgl77/datav-vue3'
import { useNodeDataStore } from '../store/node_data';
import { useLinkDataStore } from '../store/link_data';
import { storeToRefs } from 'pinia';
import { ref, reactive } from 'vue';
import left_down from './left_down.vue';
import right_down from './right_down.vue';

let dialogFormVisible = ref(false);
const formLabelWidth = '50px';
let usenodes = useNodeDataStore();
let uselinks = useLinkDataStore();
let tableData = storeToRefs(usenodes).nodes;
let links = storeToRefs(uselinks).links;

let form = reactive({
    source: '',
    target: ''
})


// console.log("这是前端",tableData);

let disabled = ref(false);
let addNode = () => {
    disabled.value = true;
    let node = usenodes.getRandomNode();
    // console.log(node);
    tableData.value.push(node);
    setTimeout(() => {
        disabled.value = false;
    }, 3000);
}
let addLink = () => {
    let link = uselinks.getRandomLink();
    link.source = form.source;
    link.target = form.target;
    console.log(link);
    links.value.push(link);
    dialogFormVisible.value = false;
}



</script>
<style scoped>
/* 每一块颜色不一样 */
.common-layout {
    /* background-color: #f0f0f0; */
    height: 100%;
}

.container1 {
    height: 97%;
}

.container2 {
    /*中央区域*/
    width: 50%;
    height: 100%;
}

.el-main {
    height: 55%;
    /* background-color: #801e1e; */
}

.dv-border-box-8 {
    margin-left: 2.5%;
    margin-top: 5%;
    width: 95%;
    height: 45%;
    /* 文字居中 */
    text-align: center;
    color: rgb(0, 255, 225);
}

.dv-border-box-10 {
    margin-left: 2.5%;
    margin-top: 2.5%;
    width: 95%;
    height: 50%;
    /* 文字居中 */
    /* text-align: center; */
    color: rgb(0, 255, 225);
}

.table {
    top: 2.5%;
    left: 2.5%;
    width: 95%;
    height: 95%;
    background-color: transparent;
}

.title {
    margin: auto;
    height: 20%;
    display: flex;

    flex-wrap: wrap;
    /* padding-bottom: 5%; */
}

.title2 {
    width: 100%;
    height: 50%;
    display: flex;
}

.addNewNode {
    width: 10%;
    margin-left: auto;
    /* 文字居中 */
    text-align: center;
    background-color: rgb(14, 63, 116);
    color: rgb(0, 229, 255);
}

.addNewLink {
    width: 10%;
    margin-right: auto;
    /* 文字居中 */
    text-align: center;
    background-color: rgb(14, 63, 116);
    color: rgb(0, 229, 255);
}

.dv-decoration-11 {

    margin: auto;
    width: 30%;
    height: 50%;
    color: aqua;
    /* 文本微软雅黑 */
    font-family: "Microsoft YaHei";

}

.dv-decoration-5 {
    margin: 0 auto;
    width: 60%;
    height: 100%;
}

.dv-border-box-3 {
    width: 100%;
    height: 80%;
}

/* .middle_top {

    width: 100%;
    height: 95%;

} */

.el-aside {
    width: 25%;
    height: 100%;
    /* background-color: #e83e3e; */
}

.el-footer {
    height: 40%;
    /* background-color: #1c5891; */
}

.right_up{
    height: 55%;
}
.right_down{
    top:5%;
    height: 90%;
}





</style>